<template>
  <div class="df fd-c">
    <!-- 月底评吸设置 -->
    <div class="top df w100 jc-sb">
      <somkeTopVue :title="title" :list="list"></somkeTopVue>
      <div> <lay-button @click="close" class="layui-btn">关闭</lay-button></div>
    </div>
    <div class="content">
      <div class="btn">
        <lay-button size="sm" style="background-color: #b8d8f8;color: #000;" @click="open_b">选择标样</lay-button>
        <lay-button size="sm" style="background-color: #b8d8f8;color: #000;" @click="open_y">选择烟支</lay-button>
      </div>
      <div class="table-group">
        <table border="">
          <tr>
            <th colspan="2">项目</th>
            <th colspan="3">光泽</th>
            <th colspan="3">香气</th>
            <th colspan="3">谐调</th>
            <th colspan="3">杂气</th>
            <th colspan="3">刺激性</th>
            <th colspan="3">余味</th>
            <th rowspan="3">合计</th>
            <th rowspan="3">操作</th>
          </tr>
          <tr>
            <td rowspan="2">样品编号</td>
            <td rowspan="2">牌别</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
            <td>|</td>
            <td>||</td>
            <td>|||</td>
          </tr>
          <!-- 最高最低分配置 -->
          <tr>
            <td v-for="(item,index) in gradeParams" :key="index">{{ item }}</td>

          </tr>
          <tr v-for="(item,index) in b_list_sele" :key="index">
            <td>标样 </td>
            <td>{{item.detail.smokeName}}</td>
            <td colspan="3">{{ item.detail.smokeGloss }}</td>
            <td colspan="3">{{item.detail.smokeAroma}}</td>
            <td colspan="3">{{item.detail.smokeHarmony}}</td>
            <td colspan="3">{{item.detail.smokeImpure}}</td>
            <td colspan="3">{{item.detail.smokeThrill}}</td>
            <td colspan="3">{{item.detail.smokeAftertaste}}</td>
            <td>{{item.detail.smokeTotal}}</td>
            <td><el-button link @click="del_y(item)">删除</el-button></td>
          </tr>

          <tr v-for="(item,index) in y_list_sele" :key="index">
            <td>{{ item.number }}</td>
            <td>{{ item.smokeModel }}</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td colspan="3">-</td>
            <td >-</td>
      
            <td><el-button link @click="del_y(item)">删除</el-button></td>
          </tr>

        </table>
      </div>
      <!-- 标样弹层 -->
      <lay-layer v-model="b_visible" :area="['800px', '620px']" :title="'选择标样'" :btn="b_visible_opteron">
        <div style="padding: 20px 40px 20px 20px;">
          <lay-table ref="tableRef3" :columns="b_columns" :data-source="b_dataSource" :default-toolbar="false" v-model:selectedKeys="b_selectedKeys">
            <!-- <template #toolbar>
              <lay-button type="primary" size="sm" @click="getSelectedKeys3">获取选中主键</lay-button>
              <lay-button size="sm" @click="getCheckData3">获取选中数据</lay-button>
              <lay-button size="sm" @click="changeSelectedKeys3">修改选中数据</lay-button>
              <lay-button size="sm" @click="clearSelectedKeys3">清空选中数据</lay-button>
            </template> -->
          </lay-table>
        </div>
      </lay-layer>

      <!-- 烟支弹层 -->
      <lay-layer v-model="y_visible" :area="['800px', '620px']" :title="'选择烟支'" :btn="y_visible_opteron">
        <div style="padding: 20px 40px 20px 20px;">
          <lay-table ref="tableRef3" :columns="y_columns" :data-source="y_dataSource" :default-toolbar="false" v-model:selectedKeys="y_selectedKeys">

          </lay-table>
        </div>
      </lay-layer>

      <!-- <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%" :header-cell-style="handerMethod">

        <el-table-column prop="a" label="Name" />
        <el-table-column prop="b" label="ID" />
        <el-table-column prop="a1" sortable label="Amount 1" />
        <el-table-column prop="b1" sortable label="Amount 2" />
        <el-table-column prop="c1" sortable label="Amount 3" />
        <el-table-column prop="a2" sortable label="Amount 1" />
        <el-table-column prop="b2" sortable label="Amount 2" />
        <el-table-column prop="c2" sortable label="Amount 3" />
      </el-table> -->
    </div>
    <!-- <div class="footer-btn">
      <div></div>
      <div>
        <lay-button @click="close" class="layui-btn layui-bg-blue">关闭</lay-button>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import somkeTopVue from "@/components/somkeTop.vue";
import { onMounted, ref } from "vue";
import { layer } from "@layui/layui-vue";
import http from "@/http/index";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
// 本页面的初始化数据
const info = ref([]);
const id = route.query.id;

const title = ref("单点评吸设置");


// 最高最低分配置
const gradeParams = ref([5, 4, 3, 32, 25, 24, 6, 5, 4, 12, 10, 8, 20, 17, 15, 25, 22, 20]);

const list = ref([
  {
    name: "单位(部门)",
    content: "许昌卷烟厂",
    id: 1,
  },
  {
    name: "时间",
    content: new Date().toLocaleString(),
    id: 2,
  },
  {
    name: "编号",
    content: "Q/HNZY 101.3 001-15",
    id: 3,
  },
]);

// 标样弹框配置
const b_visible = ref(false);
// 选择标样
const open_b = () => {
  b_visible.value = true;
  // get_b_list();
};
const b_columns = ref([
  { fixed: "left", type: "checkbox", title: "复选" },
  {
    title: "牌号",
    key: "smokeName",
  },
  {
    title: "香气",
    key: "smokeAroma",
  },
  {
    title: "余味",
    key: "smokeAftertaste",
  },
  {
    title: "光泽",
    key: "smokeGloss",
  },
  {
    title: "协调",
    key: "smokeHarmony",
  },
  {
    title: "杂气",
    key: "smokeImpure",
  },
  {
    title: "刺激性",
    key: "smokeThrill",
  },
  {
    title: "总计",
    key: "smokeTotal",
  },
]);
const b_dataSource = ref([]);
const b_selectedKeys = ref([]);
// 当前选中的标样列表
const b_list_sele = ref([]);
// 标样弹层操作
const b_visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      await enter();
      // b_list_sele.value = [];
      // b_visible.value = false;
      // console.log(b_selectedKeys.value);
      // b_selectedKeys.value.forEach((element) => {
      //   b_dataSource.value.forEach((item) => {
      //     if (item.id == element) {
      //       b_list_sele.value.push(item);
      //     }
      //   });
      // });

      // console.log(b_list_sele.value);
    },
  },
  {
    text: "取消",
    callback: () => {
      b_visible.value = false;
      //   layer.confirm("取消操作", { shade: false,icon:2 });
    },
  },
]);

// 获取标样列表
const get_b_list = async () => {
  const res = await http.corsApi("/smokeStandard", "get", {});
  console.log(res);
  b_dataSource.value = res.data;
};
//  ---------------------------------------------------------------------------------烟支  牌号 模块
const y_columns = ref([
  { fixed: "left", type: "checkbox", title: "复选" },
  { title: "牌号", key: "smokeModel" },
  // { title: "价格", key: "smokePerk" },
]);
const y_dataSource = ref([]);
const y_selectedKeys = ref([]);
const y_visible = ref(false);
// 当前选中的烟支列表
const y_list_sele = ref([]);
// 选择烟支按钮
const open_y = () => {
  if (b_selectedKeys.value && b_selectedKeys.value.length <= 0) {
    layer.msg("请先选择标样", { time: 1500, icon: 2 });
    return false;
  }
  // get_y_list();
  y_visible.value = true;
};

// 烟支弹层操作
const y_visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      await enter();
      // y_list_sele.value = [];
      // console.log(y_selectedKeys.value);
      // y_selectedKeys.value.forEach((item) => {
      //   y_dataSource.value.forEach((ele) => {
      //     if (item == ele.id) {
      //       y_list_sele.value.push(ele);
      //     }
      //   });
      // });
      // y_visible.value = false;
      // console.log(y_list_sele.value);
    },
  },
  {
    text: "取消",
    callback: () => {
      y_visible.value = false;
      //   layer.confirm("取消操作", { shade: false,icon:2 });
    },
  },
]);

// 获取烟支列表
const get_y_list = async () => {
  const res = await http.corsApi("/smokeAllowance", "get", {});
  console.log(res);
  y_dataSource.value = res.data;
};

// 确认设置
const enter = async () => {
  // if (y_selectedKeys.value.length <= 0 || b_selectedKeys.value.length <= 0) {
  //   return false;
  // }
  console.log(info.value);

  let method = "post";
  if (info.value && info.value.length > 0) {
    method = "put";
  }

  const res = await http.corsApi("/meetingMonthly", method, {
    allId: id,
    allowanceIdList: y_selectedKeys.value,
    standardIdList: b_selectedKeys.value,
  });
  console.log(res);
  if (res.data) {
    await get_page_detail();
    layer.confirm("设置完成", { icon: 1 });

    y_visible.value = false;
    b_visible.value = false;
    // setTimeout(() => {
    //   router.go(-1);
    // }, 1500);
  }
};

// 删除当前选中的
const del_y = async (item) => {
  // /meetingContrast/batch
  const res = await http.corsApi(`/meetingMonthly/${item.id}`, "delete", [item.id]);
  console.log(res);

  if (res.data) {
    layer.confirm("删除完成", { icon: 1 });
    await get_page_detail();
  }
};

// 取消
const close = () => {
  router.go(-1);
};

// 获取本页面的基本信息
const get_page_detail = async () => {
  b_list_sele.value = [];
  y_list_sele.value = [];
  b_selectedKeys.value = [];
  y_selectedKeys.value = [];
  const res = await http.corsApi("/meetingMonthly", "get", { allId: id });
  console.log(res);
  res.data.forEach((element) => {
    if (element.status == 0) {
      console.log(element.allowanceId);

      //标样
      b_selectedKeys.value.push(element.allowanceId);
      b_dataSource.value.forEach((item) => {
        if (element.allowanceId == item.id) {
          b_list_sele.value.push({ ...element, bianbao: "标样", smokeName: item.smokeName, detail: item });
        }
      });
    } else if (element.status == 1) {
      y_selectedKeys.value.push(element.allowanceId);
      y_dataSource.value.forEach((item) => {
        if (element.allowanceId == item.id) {
          y_list_sele.value.push({ ...element, bianbao: item.id, smokeModel: item.smokeModel });
        }
      });
    }

    info.value = res.data;
  });
  console.log(b_list_sele.value);
  console.log(y_list_sele.value);

  console.log(b_selectedKeys.value);
};

onMounted(async () => {
  await get_b_list();
  await get_y_list();
  await get_page_detail();
});

const tableData = ref([
  {
    a: "样品编号",
    b: "牌别",
    a1: "|",
    b1: "||",
    c1: "|||",
    a2: "|",
    b2: "||",
    c2: "|||",
  },
  {
    a: "|",
    b: "||",
    a1: "||||",
  },
  {
    name: "6",
    id: "7",
    a: "8",
    b: "9",
    c: "10",
  },
  {
    name: "6",
    id: "7",
    a: "8",
    b: "9",
    c: "10",
  },
  {
    name: "6",
    id: "7",
    a: "8",
    b: "9",
    c: "10",
  },
  {
    name: "6",
    id: "7",
    a: "8",
    b: "9",
    c: "10",
  },
]);

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  console.log(row, column, rowIndex, columnIndex);
  // 行  列
  if (rowIndex === 0) {
    if (columnIndex == 0 || columnIndex == 1) {
      // 合并 2 行，2 列
      return [2, 1];
    }
  }
};

const handerMethod = ({ row, column, rowIndex, columnIndex }) => {
  // if (row[0].level == 1) {
  // 	// 必须是row[0]=0 row[1]=2才会生效
  // 	row[0].colSpan = 0
  // 	row[1].colSpan = 2
  // 	if (columnIndex === 0) {
  // 		return { display: 'none' }
  // 	}
  // }
};
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
}
.content {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 30px 25px;
  box-sizing: border-box;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #e4e4e4;
    border-radius: 2px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #b4b7c0;
    border-radius: 2px;
  }
  .btn {
    margin-bottom: 15px;
  }

  // overflow-y: scroll;
  .table-group {
    height: 500px;

    overflow-y: scroll;
    table {
      width: 100%;
      overflow: auto;
      tr {
        th {
          padding: 10px 0;
        }
        td {
          padding: 10px;
          text-align: center;
        }
      }
    }
  }
}
.footer-btn {
  display: flex;
  justify-content: space-between;
  padding: 15px 40px;
  box-sizing: border-box;
}
:deep(.layui-body) {
  padding: 0;
}

.layui-body {
  padding: 0;
}
</style>


<!-- <style   >
.layui-body {
  padding: 0 !important;
}
</style> -->